import React, { Component } from 'react'
import "./less/Category.less"
import { TimuApi } from '../request/api'
import Goback from '../components/Goback'
import { connect } from 'react-redux'
import { AlertDispatch } from '../utils'

class Category extends Component {
    state = {
        // 试题分类
        shitiArr: [
            { key: "all", cn: "全部"},
            { key: "notdone", cn: "没做"},
            { key: "done", cn: "已做"},
            { key: "err", cn: "错误"}
        ],
        // 题目分类
        timuArr: [],
        // 做题数量
        numArr: [5, 10, 20, 30, 50, 100],
        shitiNum: 0,        // 试题分类当前项
        numNum: 0,          // 做题数量当前项
        timuNum: 0,         // 题目分类当前项
        testType: "all",    // all  全部, err 错误, done 已做, notdone 没做
    }
    componentDidMount() {
        let actionCode = this.props.match.params.code
        TimuApi({
            actionCode,
            testType: this.state.testType
        }).then(res => {
            if (res.errCode === 0) {
                let arr = JSON.parse(JSON.stringify(res.data));
                arr.map(item => {
                    switch (item.key) {
                        case "all":
                            item.cn = "全部";
                            break;
                        case "qa":
                            item.cn = "问答";
                            break;
                        case "fill":
                            item.cn = "填空";
                            break;
                        case "one":
                            item.cn = "单选";
                            break;
                        case "check":
                            item.cn = "判断";
                            break;
                        case "code":
                            item.cn = "编程";
                            break;
                        case "many":
                            item.cn = "多选";
                            break;
                        default:
                            break;
                    }
                })
                console.log(arr)
                this.setState({ timuArr: arr })
            }
        })
    }
    render() {
        return (
            <div className="category_page">
                <div className="top">
                    <section onClick={this.goPracticeFn.bind(this)}>进入练习模式</section>
                    <section onClick={this.goExamFn.bind(this)}>进入考试模式</section>
                </div>
                <div className="title">试题分类</div>
                <ul className="list">
                    {
                        this.state.shitiArr.map((item, index) => <li key={index} className={this.state.shitiNum === index ? 'active' : ''} onClick={this.shitiFn.bind(this, index)}>{item.cn}</li>)
                    }
                </ul>
                <div className="title">题目分类</div>
                <ul className="list">
                    {
                        this.state.timuArr.map((item, index) => (
                            <li key={index} className={this.state.timuNum === index ? 'active' : ''} onClick={this.timuFn.bind(this, index)}>{item.cn} {item.value}</li>
                        ))
                    }
                </ul>

                <div className="title">做题数量</div>
                <ul className="list">
                    {
                        this.state.numArr.map((item, index) => <li key={index} className={this.state.numNum === index ? 'active' : ''} onClick={this.numFn.bind(this, index)}>{item}</li>)
                    }
                </ul>
                <Goback />
            </div>
        )
    }
    // 点击进入练习页
    goPracticeFn(){
        this.props.history.push({
            pathname: "/practice",
            state: {
                testNum: this.state.numArr[this.state.numNum],
                testType: this.state.testType,
                actionCode: this.props.match.params.code,
                questionType: this.state.timuArr[this.state.timuNum].key
            }
        })
    }
    // 点击试题分类函数
    shitiFn(index) {
        this.setState({
            shitiNum: index,
            testType: this.state.shitiArr[index].key
        }, () => {
            console.log(this.state.testType);
        })
    }
    // 点击做题数量函数
    numFn(index) {
        this.setState({ numNum: index })
    }
    // 点击题目分类函数
    timuFn(index) {
        this.setState({ timuNum: index })
    }
    // 点击进入考试模式
    goExamFn() {
        this.props.showAlertFn("该功能暂未开放","warning");
    }
}

export default connect(null,AlertDispatch)(Category)
